<%@ Page Language="C#" codefile="testCodeBehind.aspx.cs" Inherits="TestAjaxWithASP.testCodeBehind" %>
<%@ Register TagPrefix="wmx" Namespace="Microsoft.Matrix.Framework.Web.UI" Assembly="Microsoft.Matrix.Framework, Version=0.6.0.0, Culture=neutral, PublicKeyToken=6f763c9966660626" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <script language="JavaScript" type="text/javascript">
// This creates a XMLRequest (ActiveXObject) to be sent to the server
var XmlReq;
// This page returns the XML Response for the selected choice
//var AjaxServerPageName = src;

function CreateXmlReq()
{
	try
	{
		XmlReq = new ActiveXObject("Msxml2.XMLHTTP");
        //alert("this is the XmlReq error ");
	}
	catch(e)
	{

		try
		{

			XmlReq = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(oc)
		{

			XmlReq = null;

		}
	}
	if(!XmlReq && typeof XMLHttpRequest != "undefined")
	{
		XmlReq = new XMLHttpRequest();
	}
}

//This fucntion is to send the choice into the AJAX Server page for processing
function FetchDGContents()
{

	var selecteditem = document.Form1.DropDownList1.value;

alert(encodeURIComponent(selecteditem));

	//Starts displaying the Process Image table
	//imgtbl.style.visibility = 'visible';
    var encode = decodeURIComponent(encodeURIComponent(selecteditem))
	var requestUrl = "http://localhost:65000/AjaxServer.aspx" + "?Choice=" + encodeURIComponent(selecteditem);
	CreateXmlReq();


	if(XmlReq)
	{
		XmlReq.onreadystatechange = HandleResponse;
		XmlReq.open("GET", requestUrl,  true);
		XmlReq.send();
	}
}

function HandleResponse()
{
	if(XmlReq.readyState == 4)
	{
      alert("State now is : " + XmlReq.readyState)
		if(XmlReq.status == 200)
		{
        alert("Status now is:" + XmlReq.status)
		// Before filling new contents into the DataGrid, clear the cotents by calling this function
			ClearTable();
			//ClearList();
		// Fill the cleared Datagrid with new XML Reponse
			FillTable2(XmlReq.responseXML.documentElement);
		// Hides the Process Image Table after displaying the contents
			//imgtbl.style.visibility = 'hidden';
			FillTable(XmlReq.responseXML.documentElement);
		}
		else
		{
			alert("There was a problem retrieving data from the server."+ XmlReq.status );
		}
	}
else{
//alert(XmlReq.readystate)
}
}



function FillTable2(scity)
{

	// Gets the response XML
	var xRows = scity.getElementsByTagName("Customers");

	var tbl = document.getElementById("DropdownList2");
    var tbl2 = document.getElementById("DropdownList3");
    var tbl3 = document.getElementById("DropdownList4");
    var tbl4 = document.getElementById("ListBox1");



	alert(XmlReq.responseText);
	var data=XmlReq.responseXML;
	alert(data);

   //if(data.childNodes(0)==null) alert(null);
	for(i=0;i<xRows.length;i++){

	var theText = xRows[i].childNodes[0].firstChild.nodeValue;


    var theValue = xRows[i].childNodes[1].firstChild.nodeValue;
    var theQuantity = xRows[i].childNodes[2].firstChild.nodeValue;

tbl.options.add(new Option(theText,0));
tbl2.options.add(new Option(theValue,0));
tbl3.options.add(new Option(theQuantity,0));
tbl4.add(new Option(theValue,0));
  }

}




//Fills the datagrid contents with the newly recieved Response content
function FillTable(mine)
{
	// Gets the response XML
	var auth = mine.getElementsByTagName("Sales");
	// Gets the table type content present in the Response XML and gets the data into a variable tbl
	var tbl = document.getElementById("DataGrid1").getElementsByTagName("tbody")[0];

	// Iterate through the table and add HTML Rows & contents into it.
	for(var i=0;i<auth.context.childNodes(0).parentNode.childNodes.length;i++)
	{
		// Create a HTML Row
		var row = document.createElement("TR");

		// Set the style
		row.setAttribute("className","text");
		//row.setAttribute("bgColor","#ECECEC");

		// Iterate thorugh the columns of each row
		for(var j=0;j<auth.context.childNodes(0).childNodes.length;j++)
		{
			// Create a HTML DataColumn
			var cell = document.createElement("TD");
			// Store the cotents we got from Response XML into the column
			cell.innerHTML = auth.context.childNodes(i).childNodes(j).text;
			// Append the new column into the current row
			row.appendChild(cell);
		}
		// Append the current row into the HTML Table(i.e DataGrid)
		tbl.appendChild(row)
	}
}

function ClearList()
{
	var tbl = document.getElementById("DropDownList2").getElementsByTagName("tbody")[0];
	var row = tbl.rows.length
	for (var i=1,j=1;j<row;i++,j++)
	{
		if (tbl.rows.length == 2){i = 1;}
		tbl.deleteRow(i);
		if (tbl.rows.length == i) {i = 0;}
	}
}

// Clearing the existing contents of the Datagrid
function ClearTable()
{
	var tbl = document.getElementById("DataGrid1").getElementsByTagName("tbody")[0];
	var row = tbl.rows.length
	for (var i=1,j=1;j<row;i++,j++)
	{
		if (tbl.rows.length == 2){i = 1;}
		tbl.deleteRow(i);
		if (tbl.rows.length == i) {i = 0;}
	}
}
</script>
    <meta content="C#" name="CODE_LANGUAGE" />
    <meta content="JavaScript" name="vs_defaultClientScript" />
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />
</head>
<body>
    <form id="Form1" name="Form1" method="post" runat="server">
        <p>
            <asp:Label id="Label1" runat="server" text="Ajax Test" backcolor="#E0E0E0" font-bold="True" font-size="Medium"></asp:Label>
        </p>
        <p>
            <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
            <asp:DropDownList id="DropDownList2" runat="server" name="DropDown"></asp:DropDownList>
            <asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList>
            <asp:DropDownList id="DropDownList4" runat="server"></asp:DropDownList>
        </p>
        <p>
        </p>
        <p>
            <asp:DataGrid id="DataGrid1" runat="server"></asp:DataGrid>
            <asp:ListBox id="ListBox1" runat="server"></asp:ListBox>
        </p>
        <!-- Insert content here -->
        <p>
        </p>
    </form>
</body>
</html>